// 页面加载完后
window.addEventListener("load", function () {
	// ---------------------banner区---------------------
	// 功能一：点击Tab区增加激活样式
	// 1.获取相关节点
	/*
	$("#tabList li").forEach(function (v, i) {
		// 2.给节点绑定点击事件
		v.addEventListener("click", function () {
			// 3.先排他，移除所有的激活样式
			$("#tabList li").forEach(function (item) {
				item.classList.remove("active");
			});
			// 4.给当前的节点增加激活样式
			// 5.排除第一个元素
			i !== 0 && this.classList.add("active");
		});
	});
    */

	const tabData = [
		{ times: 4000, price: 1200, unitPrice: "0.3000" },
		{ times: 8000, price: 2000, unitPrice: "0.2500" },
		{ times: 40000, price: 8000, unitPrice: "0.2000" },
	];

	// 功能二：动态渲染li标签，并且事件委派绑定事件
	// 1.分析后台数据遍历
	// 2.拼接为HTML结构
	tabData.forEach(function (v, i) {
		// 3.将HTML结构放入指定位置
		$("#tabList").innerHTML += `<li ${i === 0 ? "class=active" : ""} 
		data-index=${i}
		>
            ${v.times}次
        </li>`;
	});
	// 事件委派
	$("#tabList").addEventListener("click", function (e) {
		if (e.target.nodeName === "LI") {
			// console.dir(e.target.classList);
			// 判断，没有default类样式的li标签才执行里面的代码
			if (!e.target.classList.contains("default")) {
				// 3.先排他，移除所有的激活样式
				$("#tabList li").forEach(function (item) {
					item.classList.remove("active");
				});
				// 4.给当前的节点增加激活样式
				e.target.classList.add("active");
				/*
				const tabData = [
					{ times: 4000, price: 1200, unitPrice: "0.3000" },
					{ times: 8000, price: 2000, unitPrice: "0.2500" },
					{ times: 40000, price: 8000, unitPrice: "0.2000" },
				];
				*/
				// 功能三：点击标签，下方的价格联动
				/*
					思路：
					方式一：自定义属性
					方式二：用标签去存数据，显示对应的
					方式三：根据索引之间的关系去显示数据
				*/
				// 1.点击按钮，绑定点击事件
				// 2.生成对应数据的HTML结构
				// $("#bannerRtPrice").innerHTML = `
				// <span>&yen;${tabData[].price}</span>
				// （约0.3000元/次），仅限企业实名购买；
				// `;
				// 3.将生成的HTML结构放入指定位置
				// 方式一: 自定义属性
				// 取出动态渲染时保存的自定义属性索引
				const index = Number(e.target.dataset.index);
				$("#bannerRtPrice").innerHTML = `
				<span>&yen;${tabData[index].price}</span>
				（约${tabData[index].unitPrice}元/次），仅限企业实名购买；
				`;
			}
		}
	});
	// 方式三：遍历拼接HTML结构
	/*
	$("#tabList li").forEach(function (v, i) {
		v.addEventListener("click", function () {
			$("#bannerRtPrice").innerHTML = `
			<span>&yen;${tabData[i - 1].price}</span>
			（约${tabData[i - 1].unitPrice}元/次），仅限企业实名购买；
			`;
		});
	});
	*/

	//----------------------选项卡内容区----------------------

	// 功能一：给Tab增加激活交互，并且显示对应的内容
	// tabChange("#detailContList li", "active");
	// tabChange("#detailContList li", "active", "#detailContBox div", "on");
	tabChange({
		tabClassName: "active",
		tabSelector: "#detailContList li",
		contClassName: "on",
		contSelector: "#detailContBox div",
	});
	/*
	// 默认显示第一个，默认激活第一个
	$("#detailContBox").children[0].classList.add("on");
	// 1.获取相关节点
	// $("#detailContList li");
	// 2.给节点绑定点击事件
	$("#detailContList li").forEach(function (v, i) {
		v.addEventListener("click", function () {
			// 3.先排他，将所有Tab的激活取消
			$("#detailContList li").forEach(function (each) {
				each.classList.remove("active");
			});
			// 4.给当前节点增加激活样式
			this.classList.add("active");
			// 5.让对应索引的内容显示
			// 5-1.先排他
			$("#detailContBox div").forEach(function (item) {
				item.classList.remove("on");
			});
			// 5-2.显示对应内容
			$("#detailContBox div")[i].classList.add("on");
		});
	});
	*/

	// 功能二：封装Tab的渲染函数，要求能将上午开发的功能替换(有内容区和没内容区)
	// 1.基本完成功能
	// 2.确定函数名--tabChange
	// 3.确定参数--tab的选择器tabSelector、tab的激活类名tabClassName
	// --内容的选择器contSelector、contClassName
	// 4.确定是否需要返回值--不需要
	// 5.将参数和功能代码中的变量进行替换
	/*
	{
		tabSelector, tabClassName, contSelector,
		contClassName,
		tabIndex: tabIndex || 0,
		contIndex: contIndex || 0
	}
	*/

});
